<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select-tree下拉树</title>
    <link href="./select-tree.css" rel="stylesheet" />
    <style type="text/css">
        .code {
            background-color: #f6f8fa;
            padding: 10px;
            border-radius: 4px;
            color: #333;
            display: none;
        }

        .code-panel {
            padding: 10px 0;
        }

        .btn-code {
            font-size: 13px;
            color: blue;
            cursor: pointer;
        }

        .show {
            display: block;
        }

        .info {
            background-color: rgba(255, 155, 7, 0.1);
            font-size: 12px;
            color: #ff9b07;
        }
    </style>
</head>

<body style="padding: 0 50px 50px; ">
    <h3>一.基础示例</h3>
    <p>1.单选模式</p>
    <select placeholder="请选择树的内容" id="tree1">
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <div class="code-panel">
        <div class="btn-code">查看示例代码</div>
        <p class="code">
            &lt;select&nbsp;placeholder=&quot;请选择树的内容&quot;&nbsp;id=&quot;tree1&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点1&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-2&quot;&nbsp;data-pid=&quot;1&quot;&gt;子节点12&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-2-3&quot;&nbsp;data-pid=&quot;1-2&quot;&gt;子节点123&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3&quot;&nbsp;data-pid=&quot;1&quot;&gt;子节点13&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-1&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点131&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-2&quot;&nbsp;data-pid=&quot;1-3&quot;&nbsp;&gt;子节点132&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-3&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点133&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-4&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点134&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-5&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点135&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-4-1&quot;&nbsp;data-pid=&quot;1-3-4&quot;&gt;子节点1341&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点2&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点3&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2-1&quot;&nbsp;data-pid=&quot;2&quot;&gt;子节点21&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt;
        </p>
        <p class="code">
            $(&quot;#tree1&quot;).selectTree();
        </p>
    </div>
    <p>2.多选模式</p>
    <select placeholder="请选择树的内容" id="tree2" multiple>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <div class="code-panel">
        <div class="btn-code">查看示例代码</div>
        <p class="code">
            &lt;select&nbsp;placeholder=&quot;请选择树的内容&quot;&nbsp;id=&quot;tree2&quot;&nbsp;multiple&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点1&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-2&quot;&nbsp;data-pid=&quot;1&quot;&gt;子节点12&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-2-3&quot;&nbsp;data-pid=&quot;1-2&quot;&gt;子节点123&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3&quot;&nbsp;data-pid=&quot;1&quot;&gt;子节点13&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-1&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点131&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-2&quot;&nbsp;data-pid=&quot;1-3&quot;&nbsp;&gt;子节点132&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-3&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点133&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-4&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点134&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-5&quot;&nbsp;data-pid=&quot;1-3&quot;&gt;子节点135&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1-3-4-1&quot;&nbsp;data-pid=&quot;1-3-4&quot;&gt;子节点1341&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点2&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&nbsp;data-pid=&quot;0&quot;&gt;一级节点3&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2-1&quot;&nbsp;data-pid=&quot;2&quot;&gt;子节点21&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt;
        </p>
        <p class="code">
            $(&quot;#tree2&quot;).selectTree();
        </p>
        <p class="code info">
            在select标签上直接设置'multiple'属性，实现多选模式。
        </p>
    </div>
    <h3>二.折叠显示层级</h3>
    <p>1.默认展开一级</p>
    <select placeholder="请选择树的内容" id="tree3">
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <div class="code-panel">
        <div class="btn-code">查看示例代码</div>
        <p class="code">
            $(&quot;#tree3&quot;).selectTree({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expandLevel:&nbsp;1<br>});
        </p>
    </div>

    <p>2.展开全部层级</p>
    <select placeholder="请选择树的内容" id="tree4">
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <p></p>
    <select placeholder="请选择树的内容" id="tree5" multiple>
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <div class="code-panel">
        <div class="btn-code">查看示例代码</div>
        <p class="code">
            $(&quot;#tree4&quot;).selectTree({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expandAll:&nbsp;true<br>});
        </p>
    </div>

    <h3>三.默认选中值</h3>
    <p>1.单选选中</p>
    <p>
        <button onclick="alert('选中的value:' + $('#tree6').val())">获取选中的value</button>
        <button onclick="alert('请打开控制台查看输出');console.info('选中的对象:' ,tree6.getSelectInfo())">获取选中的对象</button>
        <button onclick="tree6.selectOption('1-2');">设置选项选中</button>
        <button onclick="tree6.clearSelect();">清除选中</button>
        <button onclick="tree6.expandAll();">展开所有级别</button>
        <button onclick="tree6.collapseAll();">折叠所有级别</button>

    </p>
    <select placeholder="请选择树的内容" id="tree6">
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3" selected>子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <div class="code-panel">
        <div class="btn-code">查看示例代码</div>
        <p class="code info">
            在选中的option标签中设置selected属性即可默认选中。
        </p>
    </div>

    <p>2.多选选中</p>
    <p>
        <button onclick="alert('选中的value:' + $('#tree7').val())">获取选中的value</button>
        <button onclick="alert('请打开控制台查看输出');console.info('选中的对象:' ,tree7.getSelectInfo())">获取选中的对象</button>
        <button onclick="tree7.selectOption(['1-2','1-3','2','1-3-2']);">设置选项选中</button>
        <button onclick="tree7.clearSelect();">清除选中</button>
        <button onclick="tree7.expandAll();">展开所有级别</button>
        <button onclick="tree7.collapseAll();">折叠所有级别</button>

    </p>
    <select placeholder="请选择树的内容" id="tree7" multiple>
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1" selected>子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3" selected>子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4" selected>子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <div class="code-panel">
        <div class="btn-code">查看示例代码</div>
        <p class="code info">
            在选中的option标签中设置selected属性即可默认选中。
        </p>
    </div>
    <h3>四.禁用选项</h3>
    <p>1.单选模式</p>
    <select placeholder="请选择树的内容" id="tree8">
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2" disabled>子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3" disabled>子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0" disabled>一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <div class="code-panel">
        <div class="btn-code">查看示例代码</div>
        <p class="code info">
            在选中的option标签中设置disabled属性禁用选项。
        </p>
    </div>

    <p>2.多选模式</p>
    <select placeholder="请选择树的内容" id="tree9" multiple>
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1" disabled>子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3" disabled>子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4" disabled>子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>
    <div class="code-panel">
        <div class="btn-code">查看示例代码</div>
        <p class="code info">
            在选中的option标签中设置disabled属性禁用选项。
        </p>
    </div>
    <h3>五.事件操作示例</h3>
    <p>1.单选模式</p>
    <p>
        <button onclick="alert('选中的value:' + $('#tree10').val())">获取选中的value</button>
        <button onclick="alert('请打开控制台查看输出');console.info('选中的对象:' ,tree10.getSelectInfo())">获取选中的对象</button>
        <button onclick="tree10.selectOption('1-2');">设置选项选中</button>
        <button onclick="tree10.clearSelect();">清除选中</button>
        <button onclick="tree10.expandAll();">展开所有级别</button>
        <button onclick="tree10.collapseAll();">折叠所有级别</button>

    </p>
    <select placeholder="请选择树的内容" id="tree10">
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>

    <p>2.多选模式</p>
    <p>
        <button onclick="alert('选中的value:' + $('#tree11').val())">获取选中的value</button>
        <button onclick="alert('请打开控制台查看输出');console.info('选中的对象:' ,tree11.getSelectInfo())">获取选中的对象</button>
        <button onclick="tree11.selectOption(['1-2','1-3','2','1-3-2']);">设置选项选中</button>
        <button onclick="tree11.clearSelect();">清除选中</button>
        <button onclick="tree11.expandAll();">展开所有级别</button>
        <button onclick="tree11.collapseAll();">折叠所有级别</button>

    </p>
    <select placeholder="请选择树的内容" id="tree11" multiple>
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>

    <h3>六.回调函数</h3>
    <p>1.单选模式</p>
    <p>
        请打开控制台查看输出
    </p>
    <select placeholder="请选择树的内容" id="tree12">
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>

    <p>2.多选模式</p>
    <select placeholder="请选择树的内容" id="tree13" multiple>
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="1-2-3" data-pid="1-2">子节点123</option>
        <option value="1-3" data-pid="1">子节点13</option>
        <option value="1-3-1" data-pid="1-3">子节点131</option>
        <option value="1-3-2" data-pid="1-3">子节点132</option>
        <option value="1-3-3" data-pid="1-3">子节点133</option>
        <option value="1-3-4" data-pid="1-3">子节点134</option>
        <option value="1-3-5" data-pid="1-3">子节点135</option>
        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>

    <h3>七.动态更新</h3>
    <p>
        <button onclick="reloadTree14();">重载数据</button>
    </p>
    <select placeholder="请选择树的内容" id="tree14" multiple>
        <option value=""></option>
        <option value="1" data-pid="0">一级节点1</option>
        <option value="1-2" data-pid="1">子节点12</option>
        <option value="2" data-pid="0">一级节点2</option>
        <option value="3" data-pid="0">一级节点3</option>
        <option value="2-1" data-pid="2">子节点21</option>
    </select>


    <script src="./jquery.min.js"></script>
    <script src="./select-tree.js"></script>
    <script>
        $(function () {
            $(".btn-code").click(function () {
                $(this).parents('.code-panel').find('.code').toggleClass('show');
            });
        });
        $("#tree1,#tree2").selectTree({
            treeBoxHeight:0
        });
        $("#tree3").selectTree({
            expandLevel: 1
        });
        $("#tree4,#tree5").selectTree({
            expandAll: true
        });
        var tree6 =  $("#tree6").selectTree();
        var tree7 =  $("#tree7").selectTree();
        var tree8 =  $("#tree8").selectTree();
        var tree9 =  $("#tree9").selectTree();
        var tree10 = $("#tree10").selectTree({
            changeCallBack: function (arrs) {
                console.info('发生变更，当前选中的内容是：', arrs);
            }
        });
        var tree11 = $("#tree11").selectTree({
            changeCallBack: function (arrs) {
                console.info('发生变更，当前选中的内容是：', arrs);
            }
        });
        $("#tree12,#tree13").selectTree({
            changeCallBack: function (arrs) {
                console.info('发生变更，当前选中的内容是：', arrs);
            }
        });

        var tree14 = $("#tree14").selectTree();

        function reloadTree14() {
            var newOption = '<option value="1" data-pid="0">重载选项一</option>';
            newOption += '<option value="2" data-pid="0">重载选项二</option>';
            newOption += '<option value="3" data-pid="0">重载选项三</option>';
            newOption += '<option value="21" data-pid="2">重载选项21</option>';
            newOption += '<option value="31" data-pid="3">重载选项31</option>';
            $("#tree14").html(newOption);
            tree14.clearSelect();
        }
    </script>
</body>

</html>